<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myColor {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="div1">
    </div>
    <div id="div2" class="myColor">

    </div>
    <div class="myColor" id="div4">
        <p id="p1">pppppppppp</p>
        <span id="span1">想放假</span>
    </div>
    <ul>
        <li>空调</li>
        <li>WIFI</li>
        <li id="ipone">手机</li>
        <li>吃饭</li>
    </ul>
    <script>
        let div1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>12334</p>"

        let divv = document.createElement("div")
        divv.innerHTML = "好累呀"
        div1.append(divv)

        let div2 = document.querySelector("#div2")
        console.log(div2)
        div2.prepend("000")

        let divs = document.getElementsByTagName("div")
        console.log(divs)

        let p1 = document.getElementById("p1")
        let myEle = document.createElement("h3")
        myEle.innerHTML = "我要放假"
            // div4.insertBefore(myEle, p1)
        p1.before(myEle)
        p1.after(myEle)

        let span1 = document.getElementById("span1")
        span1.remove()

        let list = document.getElementsByTagName("ul")
        console.log(list)
        console.log(list[0].firstElementChild.nextElementSibling)

        // for (item of list[0].children) {
        //     item.innerHTML = "睡觉"
        // }

        let ipone = document.getElementById("ipone")
        console.log(ipone)

        // 第一种
        // ipone.remove()
        // console.log(list)
        //第二种
        list[0].removeChild(list[0].children[2])
        console.log(list)
    </script>
</body>

</html>